<template>
	<view class="container">
		<view class="header">
			<u-icon name="arrow-left" size="32" color="#333" @click="goBack"></u-icon>
			<text class="title">用户信息</text>
		</view>
		<view class="content">
			<view class="card">
				<view class="user-info">
					<image class="avatar" :src="userInfo.avatar || '/static/touxiang.png'" mode="aspectFill"></image>
					<view class="info">
						<text class="name">{{userInfo.name}}</text>
						<text class="desc">{{userInfo.desc}}</text>
					</view>
				</view>
				<view class="basic-info">
					<view class="info-item">
						<text class="label">性别</text>
						<text class="value">{{userInfo.gender}}</text>
					</view>
					<view class="info-item">
						<text class="label">年龄</text>
						<text class="value">{{userInfo.age}}岁</text>
					</view>
					<view class="info-item">
						<text class="label">电话</text>
						<text class="value">{{userInfo.phone}}</text>
					</view>
					<view class="info-item">
						<text class="label">邮箱</text>
						<text class="value">{{userInfo.email}}</text>
					</view>
				</view>
			</view>
			
			<view class="card">
				<view class="card-title">健康信息</view>
				<view class="health-info">
					<view class="info-item">
						<text class="label">身高</text>
						<text class="value">{{userInfo.height}} cm</text>
					</view>
					<view class="info-item">
						<text class="label">体重</text>
						<text class="value">{{userInfo.weight}} kg</text>
					</view>
					<view class="info-item">
						<text class="label">血型</text>
						<text class="value">{{userInfo.bloodType}}</text>
					</view>
					<view class="info-item">
						<text class="label">过敏史</text>
						<text class="value">{{userInfo.allergies || '无'}}</text>
					</view>
				</view>
			</view>
			
			<view class="card">
				<view class="card-title">账号信息</view>
				<view class="account-info">
					<view class="info-item">
						<text class="label">注册时间</text>
						<text class="value">{{userInfo.registerDate}}</text>
					</view>
					<view class="info-item">
						<text class="label">上次登录</text>
						<text class="value">{{userInfo.lastLogin}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userId: 0,
				userInfo: {
					avatar: '/static/touxiang.png',
					name: '张三',
					desc: '健康生活，快乐每一天',
					gender: '男',
					age: 45,
					phone: '13800138000',
					email: 'zhangsan@example.com',
					height: 175,
					weight: 70,
					bloodType: 'A型',
					allergies: '对花粉过敏',
					registerDate: '2023-12-01',
					lastLogin: '2024-03-15 10:30'
				},
				defaultData: {
					avatar: '/static/touxiang.png',
					name: '张三',
					desc: '健康生活，快乐每一天',
					gender: '男',
					age: 45,
					phone: '13800138000',
					email: 'zhangsan@example.com',
					height: 175,
					weight: 70,
					bloodType: 'A型',
					allergies: '对花粉过敏',
					registerDate: '2023-12-01',
					lastLogin: '2024-03-15 10:30'
				}
			}
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			async loadData() {
				try {
					// 使用用户ID加载对应的用户信息
					const id = this.userId;
					console.log('加载用户信息，ID:', id);
					
					// 模拟API调用，实际项目中应该使用真实API
					// const res = await uni.$u.http.get(`/api/consultation/user/${id}`);
					const res = {
						code: 200,
						data: {
							id: id,
							avatar: '/static/touxiang.png',
							name: '张三',
							desc: '健康生活，快乐每一天',
							gender: '男',
							age: 45,
							phone: '13800138000',
							email: 'zhangsan@example.com',
							height: 175,
							weight: 70,
							bloodType: 'A型',
							allergies: '对花粉过敏',
							registerDate: '2023-12-01',
							lastLogin: '2024-03-15 10:30'
						}
					};
					
					if (res.code === 200) {
						this.userInfo = {
							...this.defaultData,
							...res.data
						};
					} else {
						uni.showToast({
							title: res.msg || '获取数据失败',
							icon: 'none'
						});
						this.userInfo = this.defaultData;
					}
				} catch (e) {
					console.error('获取用户信息失败:', e);
					uni.showToast({
						title: '获取数据失败',
						icon: 'none'
					});
					this.userInfo = this.defaultData;
				}
			}
		},
		onLoad(options) {
			// 获取路由参数中的用户ID
			if (options && options.id) {
				this.userId = options.id;
			}
			this.loadData();
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 30rpx;
		.header {
			display: flex;
			align-items: center;
			margin-bottom: 40rpx;
			.title {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
				margin-left: 20rpx;
			}
		}
		.content {
			.card {
				background-color: #fff;
				border-radius: 16rpx;
				padding: 30rpx;
				margin-bottom: 30rpx;
				box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
				.user-info {
					display: flex;
					align-items: center;
					margin-bottom: 30rpx;
					.avatar {
						width: 120rpx;
						height: 120rpx;
						border-radius: 60rpx;
						margin-right: 30rpx;
					}
					.info {
						.name {
							font-size: 32rpx;
							font-weight: bold;
							color: #333;
							margin-bottom: 10rpx;
							display: block;
						}
						.desc {
							font-size: 26rpx;
							color: #666;
						}
					}
				}
				.card-title {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 30rpx;
				}
				.basic-info, .health-info, .account-info {
					.info-item {
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 15rpx 0;
						border-bottom: 1rpx solid #eee;
						&:last-child {
							border-bottom: none;
						}
						.label {
							font-size: 28rpx;
							color: #666;
						}
						.value {
							font-size: 28rpx;
							color: #333;
						}
					}
				}
			}
		}
	}
</style> 